
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短剧标签分析报告</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/antd@5.11.0/dist/reset.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 1em;
        }
        
        .chart-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .chart-title {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #667eea;
        }
        
        .chart {
            width: 100%;
            height: 400px;
        }
        
        .two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .wordcloud-container .chart {
            height: 500px;
        }
        
        .heatmap-container .chart {
            height: 600px;
        }
        
        .drama-list {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .drama-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .drama-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        
        .drama-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .drama-info {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        
        .tag {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8em;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        @media (max-width: 768px) {
            .two-column {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>短剧标签分析报告</h1>
            <p>基于短剧数据的深度标签分析与可视化</p>
        </div>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">4141</div>
                <div class="stat-label">短剧总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">157</div>
                <div class="stat-label">标签总数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">12,090,968,317</div>
                <div class="stat-label">总播放量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">20</div>
                <div class="stat-label">热门标签</div>
            </div>
        </div>
        
        <div class="two-column">
            <div class="chart-container">
                <div class="chart-title">热门标签频率分布</div>
                <div id="tagChart" class="chart"></div>
            </div>
            
            <div class="chart-container">
                <div class="chart-title">标签词云图</div>
                <div id="wordcloudChart" class="chart wordcloud-container"></div>
            </div>
        </div>
        
        <div class="chart-container heatmap-container">
            <div class="chart-title">标签相关性热力图</div>
            <div id="heatmapChart" class="chart"></div>
        </div>
        
        <div class="drama-list">
            <div class="chart-title">热门短剧排行榜</div>
            <div id="dramaList">
                <!-- 热门短剧列表将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <script>
        // 数据定义
        const tagData = ["都市", "总裁", "都市情感", "穿越", "重生", "奇幻脑洞", "逆袭", "宫斗宅斗", "萌宝", "女强", "系统", "打脸虐渣", "都市脑洞", "都市日常", "女性成长", "古风言情", "奇幻爱情", "王妃", "古风权谋", "日久生情"];
        const countData = [1392, 1158, 837, 623, 526, 464, 367, 330, 326, 318, 308, 290, 268, 258, 233, 231, 173, 171, 165, 152];
        const wordcloudData = [{"name": "都市", "value": 1392, "size": 80.0}, {"name": "总裁", "value": 1158, "size": 74.35}, {"name": "都市情感", "value": 837, "size": 64.38}, {"name": "穿越", "value": 623, "size": 55.31}, {"name": "重生", "value": 526, "size": 50.12}, {"name": "奇幻脑洞", "value": 464, "size": 46.27}, {"name": "逆袭", "value": 367, "size": 39.07}, {"name": "宫斗宅斗", "value": 330, "size": 35.8}, {"name": "萌宝", "value": 326, "size": 35.43}, {"name": "女强", "value": 318, "size": 34.67}, {"name": "系统", "value": 308, "size": 33.68}, {"name": "打脸虐渣", "value": 290, "size": 31.84}, {"name": "都市脑洞", "value": 268, "size": 29.41}, {"name": "都市日常", "value": 258, "size": 28.25}, {"name": "女性成长", "value": 233, "size": 25.12}, {"name": "古风言情", "value": 231, "size": 24.85}, {"name": "奇幻爱情", "value": 173, "size": 15.97}, {"name": "王妃", "value": 171, "size": 15.62}, {"name": "古风权谋", "value": 165, "size": 14.52}, {"name": "日久生情", "value": 152, "size": 12.0}];
        const heatmapData = {"tags": ["都市", "总裁", "都市情感", "穿越", "重生", "奇幻脑洞", "逆袭", "宫斗宅斗", "萌宝", "女强", "系统", "打脸虐渣", "都市脑洞", "都市日常", "女性成长"], "matrix": [[1392, 668, 560, 72, 65, 71, 65, 0, 76, 44, 84, 51, 178, 121, 141], [668, 1158, 691, 25, 37, 13, 15, 0, 59, 13, 7, 21, 26, 57, 37], [560, 691, 837, 24, 17, 0, 0, 0, 14, 39, 0, 14, 0, 0, 0], [72, 25, 24, 623, 2, 158, 69, 23, 46, 75, 154, 26, 20, 8, 15], [65, 37, 17, 2, 526, 60, 25, 134, 31, 83, 35, 37, 7, 42, 77], [71, 13, 0, 158, 60, 464, 34, 31, 133, 16, 132, 34, 0, 5, 0], [65, 15, 0, 69, 25, 34, 367, 25, 26, 14, 0, 31, 52, 26, 41], [0, 0, 0, 23, 134, 31, 25, 330, 21, 86, 0, 58, 0, 0, 0], [76, 59, 14, 46, 31, 133, 26, 21, 326, 10, 14, 27, 0, 7, 0], [44, 13, 39, 75, 83, 16, 14, 86, 10, 318, 0, 16, 0, 7, 36], [84, 7, 0, 154, 35, 132, 0, 0, 14, 0, 308, 0, 76, 0, 0], [51, 21, 14, 26, 37, 34, 31, 58, 27, 16, 0, 290, 0, 12, 46], [178, 26, 0, 20, 7, 0, 52, 0, 0, 0, 76, 0, 268, 28, 0], [121, 57, 0, 8, 42, 5, 26, 0, 7, 7, 0, 12, 28, 258, 7], [141, 37, 0, 15, 77, 0, 41, 0, 0, 36, 0, 46, 0, 7, 233]]};
        const topDramas = [{"title": "昭世录", "tags": ["张萌"], "play_count": 488927000, "like_count": 0, "comment_count": 0}, {"title": "九龙風雲", "tags": ["都市爱情", "大男主"], "play_count": 435224000, "like_count": 0, "comment_count": 0}, {"title": "你家奶团是冥王血脉", "tags": ["玄幻修真"], "play_count": 410293000, "like_count": 0, "comment_count": 0}, {"title": "发个微信去天庭", "tags": ["都市奇幻"], "play_count": 285067000, "like_count": 0, "comment_count": 0}, {"title": "干爹带我干翻奇葩亲戚", "tags": ["大女主"], "play_count": 249732000, "like_count": 0, "comment_count": 0}, {"title": "别来无恙", "tags": ["都市爱情"], "play_count": 244487000, "like_count": 0, "comment_count": 0}, {"title": "我一个钓鱼佬怎么成天帝了", "tags": ["都市奇幻", "大男主"], "play_count": 153946000, "like_count": 0, "comment_count": 0}, {"title": "等到世界颠倒你会来爱我", "tags": ["曲折爱情"], "play_count": 145751000, "like_count": 0, "comment_count": 0}, {"title": "北凉悍刀", "tags": ["杨洁", "都市爱情"], "play_count": 139646000, "like_count": 0, "comment_count": 0}, {"title": "偷欢", "tags": ["都市爱情", "大女主"], "play_count": 122910000, "like_count": 0, "comment_count": 0}];
        
        // 18种不同的颜色
        const colors = [
            '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', 
            '#F7DC6F', '#BB8FCE', '#85C1E9', '#F8C471', '#82E0AA',
            '#D7BDE2', '#AED6F1', '#F9E79F', '#D2B4DE', '#A9DFBF',
            '#FAD7A0', '#D5DBDB', '#F5CBA7'
        ];
        
        // 绘制标签频率柱状图
        const tagChart = echarts.init(document.getElementById('tagChart'));
        const tagOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    return params[0].name + '<br/>出现次数: ' + params[0].value;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: tagData,
                axisLabel: {
                    interval: 0,
                    rotate: 45,
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                name: '出现次数'
            },
            series: [{
                data: countData,
                type: 'bar',
                itemStyle: {
                    color: function(params) {
                        return colors[params.dataIndex % colors.length];
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        tagChart.setOption(tagOption);
        
        // 绘制词云图
        const wordcloudChart = echarts.init(document.getElementById('wordcloudChart'));
        
        // 为词云图准备数据
        const processedWordcloudData = wordcloudData.map(item => ({
            name: item.name,
            value: item.size,
            count: item.value
        }));
        
        const wordcloudOption = {
            tooltip: {
                formatter: function(params) {
                    return params.name + '<br/>出现次数: ' + params.data.count;
                }
            },
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                right: null,
                bottom: null,
                sizeRange: [12, 80],
                rotationRange: [-45, 45],
                rotationStep: 45,
                gridSize: 8,
                drawOutOfBound: false,
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function(params) {
                        return colors[params.dataIndex % colors.length];
                    }
                },
                emphasis: {
                    focus: 'self',
                    textStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333',
                        fontSize: function(params) {
                            return params.data.value * 1.2;
                        }
                    }
                },
                data: processedWordcloudData
            }]
        };
        wordcloudChart.setOption(wordcloudOption);
        
        // 绘制热力图
        const heatmapChart = echarts.init(document.getElementById('heatmapChart'));
        
        // 准备热力图数据
        const heatmapDataArray = [];
        const tags = heatmapData.tags;
        const matrix = heatmapData.matrix;
        
        for (let i = 0; i < tags.length; i++) {
            for (let j = 0; j < tags.length; j++) {
                heatmapDataArray.push([j, i, matrix[i][j]]);
            }
        }
        
        const heatmapOption = {
            tooltip: {
                position: 'top',
                formatter: function(params) {
                    if (params.data[0] === params.data[1]) {
                        return tags[params.data[0]] + '<br/>出现次数: ' + params.data[2];
                    } else {
                        return tags[params.data[1]] + ' & ' + tags[params.data[0]] + '<br/>共同出现次数: ' + params.data[2];
                    }
                }
            },
            grid: {
                height: '60%',
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: tags,
                splitArea: {
                    show: true
                },
                axisLabel: {
                    interval: 0,
                    rotate: 45,
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'category',
                data: tags,
                splitArea: {
                    show: true
                },
                axisLabel: {
                    fontSize: 10
                }
            },
            visualMap: {
                min: 0,
                max: Math.max(...matrix.flat()),
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%',
                inRange: {
                    color: ['#e0f3ff', '#b3d9ff', '#80bfff', '#4da6ff', '#1a8cff', '#0066cc']
                }
            },
            series: [{
                name: '标签相关性',
                type: 'heatmap',
                data: heatmapDataArray,
                label: {
                    show: true,
                    formatter: function(params) {
                        // 只在数值较大时显示标签
                        return params.data[2] > Math.max(...matrix.flat()) * 0.1 ? params.data[2] : '';
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        heatmapChart.setOption(heatmapOption);
        
        // 生成热门短剧列表
        const dramaListElement = document.getElementById('dramaList');
        topDramas.forEach((drama, index) => {
            const dramaItem = document.createElement('div');
            dramaItem.className = 'drama-item';
            
            dramaItem.innerHTML = '<div class="drama-title">' + (index + 1) + '. ' + drama.title + '</div>' +
                '<div class="drama-info">播放量: ' + drama.play_count.toLocaleString() + '</div>' +
                '<div>' +
                drama.tags.map(tag => '<span class="tag">' + tag + '</span>').join('') +
                '</div>';
            
            dramaListElement.appendChild(dramaItem);
        });
        
        // 响应式调整
        window.addEventListener('resize', function() {
            tagChart.resize();
            wordcloudChart.resize();
            heatmapChart.resize();
        });
    </script>
</body>
</html>
